<template>
	<view>
		<!-- 页面所有内容 -->
		<view class="container">
			<!-- 顶部view部分 -->
			<view class="topViewPart">
				<u-navbar title="大宗采购绩效评价系统" title-color="#FFFFFF" title-width="600" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="false" :background="{'background-color': 'rgba(0, 0, 0, 0)'}"></u-navbar>
				<view class="topContent">
					<view class="">
						<view class="topContent-productiveDays">可正常生产</view>
						<view class="topContent-totalMoney">总资金</view>
					</view>
					<view class="">
						<view class="topContent-productiveDays"
							:class="[!materialGroupTabLists[materialGroupTabCur] ? '' : (materialGroupTabLists[materialGroupTabCur].status === '1' ? 'warning' : 'noWarning')]">
							<view class="flex-item-fontBig">{{remainingDays ? remainingDays : '0'}}</view>
							<view class="flex-item-fontNormal">&nbsp;&nbsp;天</view>
						</view>
						<view class="topContent-totalMoney">
							<view class="uni-flex uni-row">
								<view class="flex-item-fontBig">{{totalMoney}}</view>
								<view class="flex-item-fontNormal">&nbsp;&nbsp;元</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 物料组-->
			<view class="materialGroupPart">
				<!-- 物料组tab切换 -->
				<view class="materialGroupView">
					<u-tabs :list="materialGroupTabLists" :is-scroll="isTabsScroll" :current="materialGroupTabCur" @change="materialGroupTabChange" count="status" :isDot="true" height="50" barWidth="110" barHeight="3" font-size="26" :bold="false" active-color="#0672BF"
						inactive-color="#333333"></u-tabs>
				</view>
				<!-- <u-icon name="setting" size="36" color="#4EAAE6" top="-25" :custom-style="{'margin':'10rpx'}"></u-icon> -->
				<view class="chartTabView">
					<u-tabs class="chartTabView-tabs" :list="chartTabLists" :is-scroll="false" :current="chartTabCur"
						height="50" :show-bar="false" :active-item-style="{'background-color': '#0672BF'}"
						font-size="24" active-color="#FFFFFF" inactive-color="#666666" @change="chartTabChange">
					</u-tabs>
				</view> 

				<!-- 图表部分 -->
				<view class="chartView">
					<au-chartBar v-if="chartTabCur==0" :chartBarData="chartInventoryData" @chartItemClick="chartItemClick"></au-chartBar>
					<view class="" v-if="chartTabCur==1">
						<au-chartBarStack  :chartBarStackData="chartDaysData" @chartItemClick="chartItemClick"></au-chartBarStack>
						<view class="chartView-darys-legend">
							<view class="chartView-darys-legend-circle normal"></view>
							<view class="chartView-darys-legend-title">正常</view>
							<view class="chartView-darys-legend-circle adequate"></view>
							<view class="chartView-darys-legend-title">充足</view>
							<view class="chartView-darys-legend-circle notEnough"></view>
							<view class="chartView-darys-legend-title">不足</view>
						</view>
					</view>
					
				</view>
			</view>

			<!-- 采购决策部分 -->
			<scroll-view class="scrollView" scroll-y="true" @scrolltolower="scrollToBottom">
				<view class="decisionTitle">采购决策</view>
				<view>
					<socialResourceList ref="socialResourceList" @toPortSelect="toPortSelect" @closePortPopup="closePortPopup"></socialResourceList>
				</view>
			</scroll-view>
		</view>

		<!-- tabbar -->
		<u-tabbar :show="isTabbarShow" v-model="currentTabbarIndex" :list="tabbarLists" active-color="#0672BF" icon-size="30" @change="tabbarChange">
		</u-tabbar>
	</view>

</template>

<script>
	import socialResourceList from './components/socialResourceList.vue'
	export default {
		components: {
			socialResourceList
		},
		data() {
			return {
				//底部tabbar当前选中的index
				currentTabbarIndex: 0,
				tabbarLists: [{
					iconPath: "../../../../static/img/largeProcurement/tabbar_largeProcurement.png",
					selectedIconPath: "../../../../static/img/largeProcurement/tabbar_largeProcurement_selected.png",
					text: '大宗采购',
				}, {
					iconPath: "../../../../static/img/largeProcurement/tabbar_evaluation.png",
					selectedIconPath: "../../../../static/img/largeProcurement/tabbar_evaluation_selected.png",
					text: '绩效评价',
				}],
				isTabbarShow: true,
				//可正常生产天数
				remainingDays: 0,
				//总资金
				totalMoney: 0,
				//物料组列表_物料名称tab数组
				materialGroupTabLists: [],
				isTabsScroll: false,
				//物料名称tab的index
				materialGroupTabCur: 0,
				//图表tab数组
				chartTabLists: [{
					name: '企业库存'
				}, {
					name: '可生产天数'
				}],
				//图表tab的index
				chartTabCur: 0,
				//企业库存和可用天数 柱状图数据
				stockInfoList: [],
				//企业库存数据--供图表使用
				chartInventoryData: {},
				//可用天数数据--供图表使用
				chartDaysData: {},
			}
		},

		onLoad() {
			this.initData();
		},
		
		onReachBottom() {
			this.scrollToBottom()
		},

		methods: {
			//获取初始化页面的数据
			initData() {
				//可用天数及总资金占用
				this.requestDaysAndFunds()
				this.requestGroupList();
			},

			requestDaysAndFunds() {
				this.$u.api.requestDaysAndFunds().then(res => {
					this.remainingDays = res.remainingDays;
					this.totalMoney = res.totalFunds;
				}).catch(err => {
					console.log(err)
				})
			},
			//获取物料组列表及预警标识_物料名称tab数组
			requestGroupList() {
				this.$u.api.requestGroupList().then(res => {
					this.materialGroupTabLists = res;
					if(this.materialGroupTabLists.length > 3) {
						this.isTabsScroll = true;
					} else {
						this.isTabsScroll = false;
					}
					this.requestStockInfo();
				}).catch(err => {
					console.log(err)
				})
			},

			//获取柱状图数据
			requestStockInfo() {
				this.$u.api.requestStockInfo(this.materialGroupTabLists[this
					.materialGroupTabCur].pkid).then(res => {
					this.stockInfoList = res;
					//格式化柱状图数据
					let materialNames = []; //所有物料名称
					let factoryInventorys = []; //所有厂区库存
					let portInventory = []; //所有港口库存
					let forders = []; //所有订单
					let totalInventory = []; //各项库存总计
					let inventorys = []; //所有库存数据列表
					let remainingDays = []; //所有剩余可用天数
					let totalRemainingDays = []; //所有可用天数
					for (let item of this.stockInfoList) {
						materialNames.push(item.name);
						factoryInventorys.push(item.factoryInventory);
						portInventory.push(item.portInventory);
						forders.push(item.forder);
						totalInventory.push(item.totalInventory);
						let remainingDaysItem = {
							value: (item.days > 18) ? 18 : item.days,
							description: "可用" + item.days + "天"
						}
						remainingDays.push(remainingDaysItem)
						let totalRemainingDaysItem = {
							value: 18,
							description: "可用" + item.days + "天",
							isShowDescription: (item.days == 0) ? true : false,
						}
						totalRemainingDays.push(totalRemainingDaysItem)
					} 
					inventorys.push(factoryInventorys);
					inventorys.push(portInventory);
					inventorys.push(forders);
					inventorys.push(totalInventory);
					this.chartInventoryData = {
						materialNames: materialNames,
						inventorys: inventorys,
					};
					this.chartDaysData = {
						materialNames: materialNames,
						totalRemainingDays: totalRemainingDays,
						remainingDays: remainingDays,
					};
				}).catch(err => {
					console.log(err) 
				})
			},

			//页面返回
			navBack() {
				uni.navigateBack();
			},
		
			//顶部tab切换
			topTabChange(index) {
				this.topTabCur = index;
			},

			//物料组tab切换
			materialGroupTabChange(index) {
				this.materialGroupTabCur = index;
				this.requestStockInfo();
			},

			//图表tab切换
			chartTabChange(index) {
				this.chartTabCur = index;
			},

			//点击图标上的某项数据
			chartItemClick(option) {
				for (let item of this.stockInfoList) {
					if (option.name == item.name) {
						this.toMaterialDetail(item.baseMaterialPkid);
					}
				}
			},
			
			toPortSelect () {
				this.isTabbarShow = false;
			},
			
			closePortPopup() {
				this.isTabbarShow = true;
			},

			//跳转到物料详情页
			toMaterialDetail(baseMaterialPkid) {
				uni.navigateTo({
					url: 'materialWarning/materialDetail?baseMaterialPkid=' + baseMaterialPkid,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			//滚动到最底部
			scrollToBottom() {
				this.$refs.socialResourceList.loadMore();
			},

			tabbarChange(index) {
				if (index == 1) {
					uni.redirectTo({
						url: 'evaluation/index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
	}

	.topViewPart {
		background: url(../../../../static/img/largeProcurement/homeBanner.png) no-repeat;
		background-size: cover;
	}

	.topContent {
		height: 280rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 30rpx;
	}
	
	.topContent-productiveDays {
		width: 40%;
		height: 80rpx;
		line-height: 80rpx;
		float: left;
	}
	
	.topContent-totalMoney {
		width: 40%;
		height: 80rpx;
		line-height: 80rpx;
		float: right;
		margin-left: 20%;
	}

	.warning {
		color: #DF1822;
	}

	.noWarning {
		color: #FFFFFF;
	}

	.flex-item-fontBig {
		font-size: 46rpx;
		max-width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		float: left;
	}

	.flex-item-fontNormal {
		line-height: 80rpx;
		float: left;
		margin-left: 10rpx;
	}

	.materialGroupPart {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}

	.materialGroupView {
		width: 100%;
		height: 90rpx;
		padding-top: 20rpx;
		display: inline-block;
	}

	.chartTabView {
		width: 300rpx;
		margin: 0rpx auto;
	}

	.chartTabView-tabs {
		border-color: #4EAAE6;
		border-width: 1rpx;
		border-style: solid;
		border-radius: 10rpx;
	}
	
	.chartView {
		margin-top: 10rpx;
	}
	
	.chartView-darys-legend {
		width: 240rpx;
		height: 20rpx;
		margin: 0 auto;
	}
	
	.chartView-darys-legend-circle {
		width: 11rpx;
		height: 11rpx;
		border-radius: 50%;
		margin: 4rpx 10rpx;
		float: left;
	}
	
	.normal {
		background: #4EAAE6;
	}
	
	.adequate {
		background: #1CBD7A;
	}
	
	.notEnough {
		background: #DE121C;
	}
	
	.normal {
		background: #4EAAE6;
	}
	
	.chartView-darys-legend-title {
		line-height: 20rpx;
		font-size: 21rpx;
		color: #333333;
		float: left;
	}

	.scrollView {
		/* height: 650rpx; */
	}

	.decisionTitle {
		height: 28rpx;
		line-height: 28rpx;
		margin-top: 39rpx;
		text-align: center;
		font-size: 29rpx;
	}
</style>
